<template>
    <div class="new max-width">
        <router-link :to="'/detail?id='+data.new1.id" class="row" v-if="data.new1">
            <div style="flex:6">
                <img-hover class="img" :img1="data.new1.img1.fullUrl" :img2="data.new1.img2.fullUrl"></img-hover>
                <div class="txt"> {{data.new1.name}}</div>
            </div>
        </router-link>
        <router-link :to="'/detail?id='+data.new2.id" class="row" v-if="data.new2">
            <div style="flex:6">
                <img-hover class="img"  :img1="data.new2.img1.fullUrl" :img2="data.new2.img2.fullUrl">
                </img-hover>
                <div class="txt"> {{data.new2.name}}</div>
            </div>
        </router-link>
    </div>
</template>
<script>
    import imgHover from "../../components/ImgHover"
    export default {
        components:{imgHover},
        props: {
            value: {
                type: Object, default() {
                    return {
                        new1: {img1: {},img2:{}},
                        new2:{img1: {},img2:{}},
                        new3: {img1: {},img2:{}}
                    }
                }
            }
        },
        data() {
            return {data: this.value};
        },
        watch: {
            value: {
                deep: true,
                handler(value) {
                    this.data = value;
                }
            }
        },
        methods: {}
    }

</script>
<style>
    .new {
        display: flex;
        justify-content: center;
        margin: auto;
        margin-top: 3rem;
        align-items: center;
        flex-wrap:wrap;
        flex-direction: row;
    }

    .new .row {
        display: flex;
        margin: 1rem;
    }

    .new .row .txt {
        display: flex;
        justify-content: center;
        justify-items: center;
    }

    .new .img {
        width:40rem;
        height: 40rem;
        background-size: auto 105%;
    }

    .new a div:last-child{
        margin-top: 10px;
    }

    @media screen and (max-width: 60rem) {
        .new .img {
            width: 90vw;
            height: 90vw;
        }
    }
    /*.new .img6{*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: flex-end;*/
    /*}*/
</style>
